<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset='utf-8'>
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>注册</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="/lib/css/page.css" />
    <link rel="stylesheet" type="text/css" href="/lib/css/base.css" />
    <script src="/lib/js/jquery.min.js" type="text/javascript"></script>
    <link href="/lib/css/bootstrap.min.css" rel="stylesheet">
    <link href="/lib/css/materialdesignicons.min.css" rel="stylesheet">
    <!--标签插件-->
    <link rel="stylesheet" href="/lib/js/jquery-tags-input/jquery.tagsinput.min.css">
    <link href="/lib/css/style.min.css" rel="stylesheet">
</head>

<body class="sign-bg">
<div class="sign clearfix">
    <div class="top clearfix">
        <p class="fr">
            已有账号？
            <a href="/login" class="zhuce ra3">
                登录
            </a>
        </p>
    </div>
    <div class="bottom clearfix box-s ra10">
        <div class="sign-logo clearfix" style="color: #00FF00;font-size: 28px;margin: 0 auto">
            农业信息化管理后台
        </div>
            <div class="content clearfix">
                <ul>
                    <li>
                        <input type="text" name="username" id="username" value="" placeholder="用户名" class="fl shuru" />
                    </li>
                    <li>
                        <input type="text" name="nickname" id="nickname" value="" placeholder="用户昵称" class="fl shuru" />
                    </li>
                    <li>
                        <select id="sex">
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </li>
                    <li style="height: 200px">
                        <div class="form-group col-md-12">
                            <label>上传头像</label>
                            <div class="form-controls">
                                <ul class="list-inline clearfix lyear-uploads-pic">
                                    <li class="col-xs-4 col-sm-3 col-md-2">
                                        <figure>
                                            <img height="120" id="img1" src="http://img4.imgtn.bdimg.com/it/u=760099308,1827051208&fm=11&gp=0.jpg" alt="图片一">
                                        </figure>
                                        <form name="form0" id="form0" enctype="multipart/form-data">
                                            <input type="file" name="file" id="file1" multiple="multiple" /><br>
                                        </form>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li>
                        <input type="text" name="email" id="email" value="" placeholder="用户邮箱" class="fl shuru" />
                    </li>
                    <li>
                        <input type="text" name="address" id="address" value="" placeholder="用户住址" class="fl shuru" />
                    </li>
                    <li>
                        <input type="date" name="birthday" id="birthday" value="" placeholder="用户生日" class="fl shuru" />
                    </li>
                    <li>
                        <input type="tel" maxlength="11" minlength="11" onblur="yan2()" name="umobile" id="umobile" value="" placeholder="手机号码" class="fl shuru" />
                    </li>
                    <li id="ts1" style="display: none" value="0"></li>
                    <li>
                        <input type="password" name="upassword" id="upassword" value="" placeholder="密码" class="fl shuru" />
                    </li>
                    <li>
                        <input type="password" name="upassword1" id="upassword1" value="" placeholder="请再次输入密码" class="fl shuru" onblur="yan3()"/>
                    </li>
                    <li id="ts2" style="display: none" value="0"></li>

                </ul>
                <a href="#" class="sign-btn zhuce-btn ra5" ><input type="button" onclick="subfrom()"  value="立即注册" style="height: 100%;width: 100%;background-color: #7E0308"></a>
            </div>
    </div>
</div>
<script th:inline="javascript">
    var imgsrc=""
    /*上传前图片展示*/
    $("#file1").change(function(){
        var type=this.files[0].name;
        var objUrl = getObjectURL(this.files[0]) ;//获取文件信息
        var fileType = type.substr(type.length - 4, type.length);
        if (fileType == '.bmp' || fileType == '.jpg' || fileType == '.tif' ||
            fileType == '.gif' || fileType == '.png' || fileType == '.pcx'  ||
            fileType == '.tga'|| fileType == '.exif'|| fileType == '.fpx'   ||
            fileType == '.svg'|| fileType == '.psd'|| fileType == '.cdr'   ||
            fileType == '.pcd' ) {
            $("#img1").attr("src", objUrl);
            console.log(objUrl)
        }else {
            alert("*上传文件类型错误,支持类型:bmp，jpg，png，tif，gif，pcx，tga，exif，fpx，svg，psd，cdr，pcd")
        }
    }) ;
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL!=undefined) {
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }

    /*代码上传*/
    function subfrom() {
        if (imgsrc.length>0){
            $.ajax({
                url: '/file/upload',//上传地址
                type: 'POST',
                cache: false,
                data: new FormData($('#form0')[0]),//表单数据
                processData: false,
                contentType: false,
                success: function (rtn) {
                    if (rtn.status == 'error') {
                        alert("*上传文件类型错误,支持类型:bmp，jpg，png，tif，gif，pcx，tga，exif，fpx，svg，psd，cdr，pcd")　　//根据后端返回值,回显错误信息
                    } else {
                        /*上传成功*/
                        imgsrc="https://"+rtn.name;
                        console.log(imgsrc)
                        subimg();
                    }
                }
            });
        }else {
            imgsrc="http://img4.imgtn.bdimg.com/it/u=760099308,1827051208&fm=11&gp=0.jpg"
            subimg();
        }
    }

    function subimg() {
        if( imgsrc.length>0){
            $.ajax({
                url:"/user/add",
                type:'post',
                data:{
                    username:$("#username").val(),
                    nickname:$("#nickname").val(),
                    sex:$("#sex").val(),
                    picture:imgsrc,
                    email:$("#email").val(),
                    address:$("#address").val(),
                    birthday:$("#birthday").val(),
                    phone:$("#umobile").val(),
                    password:$("#password").val(),
                },
                datatyp:'json',
                success:function (message) {
                    if (message.code==0){
                        //正确
                        alert("添加成功！")
                    }else {
                        alert("更新失败！")
                    }
                }
            })
        }else {
            alert("更新失败！")
        }
    }
</script>
<script type="text/javascript">
    $("#box").on('click',function () {
        yan2();
        yan3();
    })

    function sub(){
        if ($("#ts1").val()=="1"&& $("#ts2").val()=="1"){
            if(confirm("确认注册！")){
                subfrom()
            }

        }else {
            yan2();
            yan3();
            alert("请正确填写注册信息！")
        }
    }

    function yan3() {
        console.log($("#upassword").val()+":"+$("#upassword1").val())
        if($("#upassword").val()!=$("#upassword1").val()||$("#upassword").val()==""){
            $("#ts2").css({"color":"red","display":"block","height":"24px"})
            $("#ts2").html("确认密码与密码不匹配！")
            $("#ts2").val("0")
        }else {
            $("#ts2").css({"display":"none"})
            $("#ts2").val("1")
            $("#ts1").html("")
        }
    }
    /*验证手机号码输入是否正确*/
    function yan2() {
        var ph= "^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\\d{8}$";
        console.log( isPhoneNo($("#umobile").val()))
        if( isPhoneNo($("#umobile").val())){
            $("#ts1").css({"display":"none"})
            $("#ts1").val("1")
            $("#ts1").html("")
        }else {
            $("#ts1").css({"color":"red","display":"block","height":"24px"})
            $("#ts1").html("请输入正确的手机号！")
            $("#ts1").val("0")
        }

        function isPhoneNo(phone) {
            var pattern = /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/;
            return pattern.test(phone);
        }
    }
</script>
</body>
</html>